<script setup>
import { useAuthStore } from '@/stores/modules/auth'
import { useAuthButtons } from '@/hooks/useAuthButtons'

const authStore = useAuthStore()
const { BUTTONS } = useAuthButtons()

</script>

<template>
  <div>
    <div>按钮权限列表: {{ authStore.authButtonList }}</div>
    <hr />
    <div>1. 使用 Hooks 方式绑定权限</div>
    <button v-if="BUTTONS['a:b:edit']">有权限的按钮</button>
    <button v-if="BUTTONS['a:b:edit1']">没有权限的按钮</button>
    <hr />
    <div>2. 使用 v-auth 指令绑定单个权限</div>
    <!-- 存在正确的按钮权限 -->
    <button v-auth="'a:b:edit'">有权限的按钮</button>
    <!-- 不存在的按钮权限 -->
    <button v-auth="'a:b:edit1'">没有权限的按钮</button>
    <hr />
    <div>3. 使用 v-auth 指令绑定多个权限</div>
    <button v-auth="['a:b:edit']">有权限的按钮</button>
    <button v-auth="['a:b:edit1']">没有权限的按钮</button>
    <button>没有权限控制的按钮</button>
  </div>
</template>
